<template>
    <div class="error_widget">
        <aside>
            <h2 class="stereoscopic">404</h2>
            <p class="error_text">当前页面走丢了，哈哈~</p>
        </aside>
    </div>
</template>

<style lang="scss">
    .error_widget {
        display: grid;
        place-items: center;
        height: 100%;
        .stereoscopic {
            font-size: 9rem;
            --color--: #919191;
            text-shadow: 1px 1px 1px var(--color--),
            1px 2px 1px var(--color--),
            1px 3px 1px var(--color--),
            1px 4px 1px var(--color--),
            1px 5px 1px var(--color--),
            1px 6px 1px var(--color--),
            1px 7px 1px var(--color--),
            1px 8px 1px var(--color--),
            1px 9px 1px var(--color--),
            1px 10px 1px var(--color--);
        }
        .error_text {
            color: var(--color--);
            text-align: center;
        }
    }
</style>